<template>
  <div>
    <el-form
      :model="carFrom"
      ref="carFrom"
      label-width="100px"
      class="demo-data"
    >
      <el-form-item label="车辆类型" prop="type">
        <el-radio-group v-model="carFrom.carType" :disabled="show">
          <el-radio label="小型车"></el-radio>
          <el-radio label="SUV"></el-radio>
        </el-radio-group>
     </el-form-item>
    <el-form-item label="车牌号" prop="num" style="width: 300px;">
      <el-upload
        class="upload-demo"
        :action=imageUrl
         multiple
        :limit="1"
        show-file-list="true"
        :on-success="uploadOK">
        <el-input v-model="carFrom.carNum" :disabled="show" v-show="show"></el-input>
        <el-button size="small" type="primary" v-show="!show" @click="upload">点击上传</el-button>
      </el-upload>
      </el-form-item>
      <el-form-item label="地址" prop="adress" style="width: 500px;">
      <el-input type="textarea" v-model="carFrom.address" :disabled="show"></el-input>
    </el-form-item>
      <el-form-item>
        <el-button type="primary" v-show="show" @click="update">修改</el-button>
        <el-button type="primary" @click="submitForm('carFrom')" v-show="!show">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {updateCar} from '@/api/index'
export default {
  name: "UpdateInfo",
  data() {
    return {
      show:true,
      carFrom: {
        carId:'',
        carType:'',
        carNum:'',
        address:'',
      },
      imageUrl:'',
    }
  },
  //挂载之前调用
  beforeMount(){
    this.carFrom.carId = this.$store.state.carDTO.carId
    this.carFrom.carType = this.$store.state.carDTO.carType
    this.carFrom.carNum = this.$store.state.carDTO.carNum
    this.carFrom.address = this.$store.state.carDTO.address
  },
  methods: {
    //修改信息
    update(){
      //输入框解禁 展示保存、重置按钮
      this.show = !this.show
      // console.log(this.carFrom)
    },

    //保存按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //调用修改方法
          updateCar(this.carFrom).then(
              response => {
                if(response.success){
                  this.$alert('保存成功')
                  //将表单改为禁用状态 隐藏保存、重置按钮
                  this.show = !this.show
                  //修改完毕后，重新调取车辆信息接口，刷新数据
                  this.$store.dispatch('getNowCar',this.carFrom.carId)
                }
              });
        } else {
          //填写不合法
          return false;
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getData(){
      //进行信息的绑定
      this.userDTO.username = this.carFrom.name
      this.userDTO.phone = this.carFrom.phone
    },
    //上传图片识别
    upload(){
      this.imageUrl = 'http://localhost:8081/upload'
    },
    //上传成功的回调
    uploadOK(response){
      // console.log(response.data.words_result.number)
      this.carFrom.carNum = response.data.words_result.number
      // console.log(this.carFrom)
    }
  },
  mounted(){
    //挂载时调用
    if (this.$store.state.carDTO.carNum == '') {
      this.$alert('请完善您的车辆信息')
    }
  },
}
</script>

<style>
.demo-data {
  float: right;
  width: 80%;
  margin-top: 20px;
}
</style>